<!DOCTYPE html>
<html lang="en">
<!--
设计式响应
    自己创建响应 样式
    使用现成的css框架  Bootstrap 是目前最流行的开发响应式
code 定义计算机代码文本
kbd 定义键盘输入文本
samp 定义计算机代码实例
var 定义变量
pre 定义预格式文本
语义元素 清楚的向浏览器和开发者描述其意义
非语言元素的例子 div和 span 无法提供其内容的信息
语言元素的例子 form table img 清晰定义其内容
html5 的语义元素
header (为文档或页眉,用于介绍性内容的容器)
nav (元素定义导航链接集合 用于定义大型的导航链接)
section (定义文档中的节,是带有主题的内容组,通常带有标题)
        aside (定义侧栏 用于侧栏内容)
article (规定独立的自包含内容 ,文档有其自身意义,可以独立于网页其他内容进行阅读,常见应用常见 论坛 博客,新闻)
footer  (定义页脚 页脚通常包含文档的作者,版权信息,联系方式,网站地图,版权信息等)
figure (定义图像或代码的容器)
figcaption (定义figure元素的标题)
caption (定义为图片添加可见的解释)

语义元素
<article>	定义文章。
<aside>	定义页面内容以外的内容。
<details>	定义用户能够查看或隐藏的额外细节。
<figcaption>	定义 <figure> 元素的标题。
<figure>	规定自包含内容，比如图示、图表、照片、代码清单等。
<footer>	定义文档或节的页脚。
<header>	规定文档或节的页眉。
<main>	规定文档的主内容。
<mark>	定义重要的或强调的文本。
<nav>	定义导航链接。
<section>	定义文档中的节。
<summary>	定义 <details> 元素的可见标题。
<time>	定义日期/时间。

代码约定
文档首行声明文档类型
<!DOCTYPE html>

使用小写的元素名
    推荐 使用小写的元素名
    混合大小写名称并不好
    开发习惯使用小写名
    小写更加纯净
    小写更易书写
 建议关闭所有元素 如 <p>
 关闭空的元素 如 <meta charset="UTF-8"> <meta charset="UTF-8"/>
 斜杠/在xhml 和 xml中是必须得

 使用小写属性名
    div class="city"

 属性加引号
    table class = "lamp"

 必须对图像使用alt属性 当图片无法显示时该属性很重要
 <img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
请 始终定义图片尺寸 这样会减少闪烁 因为浏览器在图像加载之前为图像预览空间

空格和等号两边的空格是合法的
link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"

避免长代码行
避免一行代码超过80个字符
空行和缩进
请勿毫无理由增加空行
为了提高可读性
    增加空行来分隔大型或逻辑代码块
    请增加两个空格的缩进不要使用tab

不建议省略 html 和 body 标签
title 元素在html5中是必须得,请尽可能制作有意义的标题
HTML 注释
短注释应该在单行中书写，并在 < !-- 之后增加一个空格，在 --  > 之前增加一个空格：
样式表
请使用简单的语法来链接样式表（type 属性不是必需的）：
短规则可以压缩为一行，就像这样：
p.into {font-family:"Verdana"; font-size:16em;}
开括号与选择器位于同一行
在开括号之前用一个空格
使用两个字符的缩进
在每个属性与其值之间使用冒号加一个空格
在每个逗号或分号之后使用空格
在每个属性值对（包括最后一个）之后使用分号
只在值包含空格时使用引号来包围值
把闭括号放在新的一行，之前不用空格
避免每行超过 80 个字符

请使用简单的语法来加载外部脚本（type 属性不是必需的）：

<script src="myscript.js">

使用小写文件名
大多数 web 服务器（Apache、Unix）对文件名的大小写敏感：

不能以 london.jpg 访问 London.jpg。

其他 web 服务器（微软，IIS）对大小写不敏感：

能够以 london.jpg 或 London.jpg 访问 London.jpg。

如果使用混合大小写，那么您必须保持高度的一致性。

如果您从对大小写不敏感的服务器转到一台对大小写敏感的服务器上，这些小错误将破坏您的网站。

为了避免这些问题，请始终使用小写文件名（如果可以的话）。
文件扩展名
HTML 文件名应该使用扩展名 .html（而不是 .htm）。

CSS 文件应该使用扩展名 .css。

JavaScript 文件应该使用扩展名 .js。

-->
<head>
    <meta charset="UTF-8">
    <title>HtmlXML</title>
    <meta charset="UTF-8">
    <meta name = "viewport" content="width-device-width,initial-scale=1">
<!--    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">-->
    <link rel="stylesheet" href="/css/cssDemo.css">
</head>
<body>
<nav>
    <a href="/html">HTML</a>
    <a href="/css">CSS</a>
    <a href="/js">JavaScript</a>
    <a href="/jquery">jQuery</a>
</nav>
<h1>w3school Demo</h1>
<h2>Resize this responsive page!</h2>
<br>
<p>my first paragraph.</p>
<aside>
    <h4>Epcot Center</h4>
    <p>the Epcot Center is a theme park at <mark>Epcot</mark>, Disney's theme park in California.</p>
</aside>
<div class = "city">
    <h2>London</h2>
    <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Condominium.</p>
<!--    自定义键盘输入样式 kbd-->
<!--    <p>To open a file, select;</p>-->
<!--    <p><kbd>File > Open...</kbd></p>-->
<!--    <code> <pre>-->
<!--        var person = {-->
<!--            firstName:"John",-->
<!--            lastName:"Doe",-->
<!--            age:50,-->
<!--            eyeColor:"blue"-->
<!--        }-->
<!--    </pre>-->
<!--    </code>-->
</div>

<div class="city">
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p>
    <p>Paris is the center of France's metropolitan area, which has an estimated population of about two million.</p>
</div>

<div class="city">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
    <p>Tokyo is the center of Japan's metropolitan area, which has an estimated population of about 13 million.</p>
</div>
<div class="city">
    <article>
        <header>
            <h1>What Does W3C Stand For?</h1>
            <p>World Wide Web Consortium</p>
        </header>
        <p>The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards. These standards govern the Web's contents and technical structure. These standards and guidelines promote the Web's long-term growth and maintenance.</p>
    </article>
</div>
<div class="city">
    <section>
        <h1>wwf</h1>
        <p>The world federation of nature</p>
    </section>
</div>
<div class="city">
    <article>
        <h1>What Does W3C Stand For?</h1>
        <p>World Wide Web Consortium</p>
    </article>
</div>
<div class="city">
    <footer>
        <h1>What Does W3C Stand For?</h1>
        <p>Contact information: <a href="mailto:webmaster@example.com">webmaster@example.com</a>.</p>
    </footer>
</div>

<!--使用外部样式 bootstrap-->
<!--<div class = "container">-->
<!--    <div class="row">-->
<!--        <div class = "col-md-4">-->
<!--            <h2>London</h2>-->
<!--            <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>-->
<!--        </div>-->
<!--        <div class = "col-md-4">-->
<!--            <h2>Paris</h2>-->
<!--            <p>Paris is the capital of France.</p>-->
<!--        </div>-->
<!--        <div class = "col-md-4">-->
<!--            <h2>Tokyo</h2>-->
<!--            <p>Tokyo is the capital of Japan.</p>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->
</body>
</html>